<template>
  <div>
    <Input v-model="newName" placeholder="请选择上传文件" v-if="inputShow">
      <Button
        v-if="view"
        icon="ios-eye"
        slot="prepend"
        @click="downFile(newName)"
      >
      </Button>
      <Button
        type="primary"
        icon="ios-cloud-upload-outline"
        slot="append"
        @click="handler"
        >上传</Button
      >
    </Input>
    <Button
      v-else
      type="primary"
      icon="ios-cloud-upload-outline"
      slot="append"
      @click="handler"
      >上传</Button
    >
    <Upload
      v-model="name"
      :action="postUrl"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :on-remove="removeFile"
      :format="formatList"
      :max-size="maxSize"
      :on-exceeded-size="onExceededSize"
      :on-format-error="onFormatError"
      :show-upload-list="false"
      :files="files"
      :on-progress="onProgress"
    >
      <Button v-show="1 == 2" type="primary" ref="upload">上传</Button>
    </Upload>

    <Progress :percent="per" :stroke-width="5" v-show="vshowPro" />
  </div>
</template>
<script>
export default {
  name: "inputFile",
  model: {
    prop: "value",
    event: "on-change",
  },
  data() {
    return {
      inputShow: true, //隐藏input
      file: null,
      name: this.value,
      downUrl: "/",
      fileUrlPath: "",
      nameList: [],
      postUrl:"/upload/?token=Bearer ",
      formatList: ["png", "jpg", "gif"],
      newName: "",
      newPath: "",
      per: 0,
      vshowPro: false,
    };
  },
  created() {},
  props: {
    value: [String, Number, Array, Object],
    maxSize: {
      type: Number,
      default: 10240,
    },
    files: {
      type: Boolean,
      default: false,
    },
    parms: {
      type: String,
      default: "",
    },
    showButton: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    onProgress(event, file, fileList) {
      this.per = 0;
      this.vshowPro = true;
    },
    handler() {
      this.$refs.upload.$el.click();
    },
    //  change(event) {
    //  this.$emit('on-change', event.target.value)
    // },
    //上传成功文件
    uploadSuccess(response, file, fileList) {
      this.per = 60;
      this.vshowPro = true;
      const hbaseFileList = [];
      const filesList = [];
      if (file.response.status == 0) {
        let objImag = {};
        objImag.fileName = file.response.data.fileName;
        objImag.filePath = file.response.data.downloadPath;
        filesList.push(objImag);
        this.newName = file.response.data.downloadPath;
        this.newPath = file.response.data.downloadPath;
        this.$emit("on-change", JSON.stringify(filesList));
        this.per = 100;
        setTimeout(() => {
          this.per = 0;
          this.vshowPro = false;
        }, 2000);
      } else {
        this.$Message.error("上传失败，请重新上传!");
      }
    },
    //上传文件失败
    uploadError(response, file, fileList) {
      this.$Message.error("上传失败，请重新上传!");
    },
    //文件大小验证返回
    onExceededSize(file, fileList) {
      if (Object.keys(file).length == 0) {
        this.$Message.error(
          "上传文件不能大于" + this.maxSize + "k，请重新上传!"
        );
      }
    },
    //文件格式验证
    onFormatError(file, fileList) {
      if (Object.keys(file).length == 0) {
        this.$Message.error("上传文件格式不正确，请重新上传!");
      }
    },
    //删除上传
    removeFile(file, fileList) {},
    formatL() {
      if (this.files) {
        this.formatList = [
          "pdf",
          "docx",
          "doc",
          "xls",
          "xlsx",
          "txt",
          "png",
          "jpg",
          "gif",
          "zip",
          "rar",
        ];
      }
      return this.formatList;
    },
    downFile(path) {
      let truePath = path.trim();
      if (truePath.length > 2) {
        if (
          truePath.substring(0, 7).toLowerCase() == "http://" ||
          truePath.substring(0, 8).toLowerCase() == "https://"
        ) {
          window.open(truePath, "_blank");
        } else {
          this.fileUrlPath = this.downUrl + path;
          window.open(this.fileUrlPath, "_blank");
        }
      }
    },
  },
  mounted() {
    this.formatL();
  },
  computed: {
    nativeInputValue() {
      return this.value === null || this.value === undefined ? "" : this.value;
    },
    view() {
      return true;
    },
  },
  watch: {
    value(v) {
      this.name = v;
    },
  },
};
</script>